<template>
  <div>
    <!-- 相册 -->
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">公司相册</el-button>
      </div>
    </div>
    <div class="album">
      <!-- 头部的内容 -->
      <br style="clear: both" />
      <div class="title">
        <div class="title_p"></div>
      </div>

      <!-- 上传图片 -->
      <div class="Upload">
        <div class="Upload_btn">
          <el-button
            type="primary"
            class="btn"
            @click="dialogFormVisible1 = true"
            >上传图片</el-button
          >

          <el-button
            class="btn"
            style="background-color: #fff"
            @click="dialogFormVisible = true"
          >
            创建相册
          </el-button>
          <el-button class="btn" style="background-color: #fff">
            编辑排序
          </el-button>

          <el-button @click="manage()" type="primary" class="btn">
            相册管理
          </el-button>

          <input class="inp1" style="margin-left: 10px" />
          <button class="btn1" style="border: 0">
            <el-icon><Search /></el-icon>
            查询
          </button>

          <!-- 图片列表 -->
          <div class="img_list_box">
            <div class="nest" v-for="item in 12">
              <div class="img_list_item1"></div>
              <div class="img_list_item2"></div>
              <div class="img_list_item3"></div>
              <div class="img_list_item4">
                <div>
                  <img src="" alt="" style="width: 180px; height: 180px" />
                </div>
                <div style="text-align: center; margin-top: 10px">排屑机</div>
                <div style="text-align: center">
                  <span style="margin-left: 10px">55张</span>
                  <span style="float: right">
                    <el-popover
                      placement="bottom"
                      trigger="hover"
                      style="width: 96px; height: 36px"
                    >
                      <!-- 展开 收起 -->
                      <template #reference>
                        <div class="df">
                          <div class="expand"></div>
                          <div class="expand"></div>
                          <div class="expand"></div>
                        </div>
                      </template>
                      <div>
                        <div style="margin-left: 20px">
                          <el-button type="" text>删除相册</el-button>
                        </div>
                      </div>
                    </el-popover>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 上传图片弹出框 -->
          <el-dialog
            v-model="dialogFormVisible1"
            style="width: 780px; height: 538px"
            draggable
            align-center
            center
            class="t1"
          >
            <div class="title_title">上传图片</div>
            <div class="xian"></div>
            <el-form :model="form">
              <el-form-item label="选择相册">
                <el-select v-model="form.region" placeholder="请选择相册">
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
                <el-button
                  type="text"
                  class="ml10"
                  @click="dialogFormVisible = true"
                  >新建相册</el-button
                >
              </el-form-item>

              <el-form-item class="uploadimg">
                <el-upload drag multiple>
                  <!-- <el-icon class="el-icon--upload"><upload-filled /></el-icon> -->
                  <div class="el-upload__text">
                    <el-button type="primary" class="btn">上传图片</el-button>
                    <div>将文件拖放到此窗口即可上传</div>
                  </div>
                  <template #tip>
                    <div class="el_text">
                      <div>
                        1. 当上传的图片宽度超过 1000
                        像素时，系统会自动对图片进行等比例压缩
                      </div>
                      <div>
                        2. 图片支持jpg、jpeg、png格式，单张大小不超过10M
                      </div>
                      <div>
                        3.
                        请勿上传、使用带有任何联系方式（如手机、QQ、电话、微信号及微信二维码等）的图片
                      </div>
                    </div>
                  </template>
                </el-upload>

                <!--  -->
                <div class="illustrate">
                  已选择图片5张 还可以选择45张 （拖动可修改顺序）
                </div>

                <!-- 展示图片 -->
                <div class="listImg">
                  <div class="list_item" v-for="item in 5">
                    <span>
                      <img src="../../../assets/img/36.png" alt="" />
                    </span>
                    <img src="../../../assets/img/1.png" alt="" />
                  </div>
                </div>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="bottom_btn">
                <el-button
                  @click="dialogFormVisible1 = false"
                  style="width: 90px; height: 36px"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  @click="dialogFormVisible1 = false"
                  class="btn"
                >
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>

          <!-- 创建相册弹出框 -->
          <el-dialog
            v-model="dialogFormVisible"
            style="width: 500px; height: 249px"
            draggable
            align-center
            center
            class="t1"
          >
            <div class="title_title">新建相册</div>
            <div class="xian"></div>
            <el-form :model="form">
              <el-form-item
                label="相册名称"
                center
                style="margin: 20px 77px 0 47px"
              >
                <el-input
                  v-model="form.name"
                  autocomplete="off"
                  style="width: 280px; height: 36px"
                />
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button
                  @click="dialogFormVisible = false"
                  style="width: 90px; height: 36px"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  @click="dialogFormVisible = false"
                  class="btn"
                >
                  确定
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import top from "../../../components/top/top.vue";
import "../../../assets/css/size.css";
import { UploadFilled } from "@element-plus/icons-vue";
// 路由
const router = useRouter();
// 弹出框 创建相册
const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

// 相册管理
const manage = () => {
  router.push("/websiteAlbumManage");
};
</script>
<style>
.el-upload-dragger {
  width: 740px;
  height: 120px;
}
</style>
<style lang="scss" scoped>
.album {
  // width: 1610px;
  // height: 930px;
  background: #ffffff;
  border-radius: 0px;
  margin-left: 10px;
  // overflow: hidden;

  // 头部内容
  .title {
    width: 1530px;
    height: 198px;
    background: #ecf4ff;
    opacity: 1;
    margin: 10px 40px 20px 40px;
    box-sizing: border-box;

    .title_p {
      padding: 20px 0 20px 20px;
    }
  }

  .Upload {
    margin-left: 40px;
  }
}
.inp1 {
  width: 320px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #dcdfe5;
  border-radius: 5px 0 0 5px;
  outline: none;
  padding-left: 10px;
}
.btn1 {
  width: 90px;
  height: 37px;
  background: #3091ff;
  vertical-align: top;
  border-radius: 0px 4px 4px 0px;
  cursor: pointer;
  color: #fff;
}

.xian {
  width: 100%;
  height: 1px;
  background: #eeeeee;
  margin-bottom: 50px;
}
.t1 {
  position: relative;
}
.title_title {
  width: 64px;
  height: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 0px;
  color: #304156;
  position: absolute;
  top: 30px;
  left: 20px;
}

.uploadimg {
  width: 740px;
  height: 120px;
}

.el_text {
  // width: 486px;
  height: 53px;
  font-size: 12px;
  font-weight: 400;
  color: #abb3c3;
  line-height: 20px;
}

// 说明
.illustrate {
  width: 740px;
  height: 30px;
  background: #ecf4ff;
  opacity: 1;
  border-radius: 0px;
  padding-left: 10px;
  margin-bottom: 20px;
}

// 按钮
.bottom_btn {
  margin-top: 150px;
}

// 上传图片列表展示
.listImg {
  display: flex;
  .list_item {
    width: 60px;
    height: 60px;
    margin: 10px 0 0 20px;
    border: 1px dashed #c4c5c5;
    position: relative;
    span {
      display: block;
      width: 18px;
      height: 18px;
      position: absolute;
      top: -5px;
      right: -10px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}

// 图片列表
.img_list_box {
  display: flex;
  flex-wrap: wrap;
  .nest {
    position: relative;
    margin: 20px 0px 50px 0;
  }
  .img_list_item1 {
    width: 200px;
    height: 250px;
    background: #f6f6f6;
    border: 1px solid #dddddd;
    opacity: 1;
    border-radius: 0px;
    margin: 20px 60px 0 0;
  }
  .img_list_item2 {
    width: 200px;
    height: 250px;
    background: #f6f6f6;
    border: 1px solid #dddddd;
    opacity: 1;
    border-radius: 0px;
    position: absolute;
    top: 30px;
    left: 10px;
  }
  .img_list_item3 {
    width: 200px;
    height: 250px;
    background: #f6f6f6;
    border: 1px solid #dddddd;
    opacity: 1;
    border-radius: 0px;
    position: absolute;
    top: 40px;
    left: 20px;
  }
  .img_list_item4 {
    width: 180px;
    height: 180px;
    background: #c6c6c6;
    opacity: 1;
    border-radius: 0px;
    position: absolute;
    top: 50px;
    left: 30px;
  }
  .expand {
    width: 4px;
    height: 4px;
    background: #adadad;
    border-radius: 50%;
    margin: 6px 2px 2px 2px;
  }
}
</style>
